<template>
	<view class="canvas-img-code"><canvas :style="{ width: width + 'px', height: height + 'px' }" canvas-id="imgcanvas"
		 @click="refresh" @error="canvasIdErrorCallback"></canvas></view>
</template>

<script>
	export default {
		data() {
			return {
				width: 120,
				height: 35
			}
		},
		mounted: function() {
			var _self = this
			setTimeout(function() {
				_self.init()
			}, 300)
		},
		methods: {
			init: function() {
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height
				context.setFillStyle('white')
				context.setLineWidth(5)
				context.fillRect(0, 0, w, h)
				var pool = [
					'A',
					'B',
					'C',
					'D',
					'E',
					'F',
					'G',
					'H',
					'I',
					'J',
					'K',
					'L',
					'M',
					'N',
					'O',
					'P',
					'Q',
					'R',
					'S',
					'T',
					'U',
					'V',
					'W',
					'S',
					'Y',
					'Z',
					'1',
					'2',
					'3',
					'4',
					'5',
					'6',
					'7',
					'8',
					'9',
					'0'
				],
					str = ''
				for (var i = 0; i < 4; i++) {
					var c = pool[this.rn(0, pool.length - 1)] //随机的字
					var deg = this.rn(-20, 20) //字体的旋转角度
					context.setFontSize(18)
					context.setTextBaseline('top')
					context.setFillStyle(this.rc(80, 150))
					context.save()
					context.translate(30 * i + 15, parseInt(h / 1.5))
					context.rotate((deg * Math.PI) / 180)
					context.fillText(c, -15 + 5, -15)
					context.restore()
					str += c
				}
				uni.setStorage({
					key: 'imgcode',
					data: str.toLowerCase()
				})
				for (var i = 0; i < 40; i++) {
					context.beginPath()
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI)
					context.closePath()
					context.setFillStyle(this.rc(150, 200))
					context.fill()
				}
				context.draw()
			},
			rc: function(min, max) {
				var r = this.rn(min, max)
				var g = this.rn(min, max)
				var b = this.rn(min, max)
				return 'rgb(' + r + ',' + g + ',' + b + ')'
			},
			rn: function(max, min) {
				return parseInt(Math.random() * (max - min)) + min
			},
			refresh: function() {
				this.init()
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.message)
			}
		}
	}
</script>

<style lang="scss">
	.canvas-img-code {
		display: inline-block;
	}
</style>
